<template>
  <Spin :spinning="loading" :wrapper-class-name="prefixCls">
    <div id="ZOfficeContainer" class="h-full w-full"></div>
  </Spin>
</template>

<script lang="ts" setup name="index">
  import { ref, onMounted } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useScript } from '/@/hooks/web/useScript';
  import { Spin } from 'ant-design-vue';
  import { ParamsKeyEnum } from '/@/enums/appEnum';
  import { useMessage } from '/@/hooks/web/useMessage';

  import { getGetZOfficeTokenApi } from '/@/api/admin/user';
  import { getParamKeyApi } from '/@/api/admin/param';

  const { prefixCls } = useDesign('HZOffice');
  const messageFn = useMessage();

  const ZOffice = ref<any>(null);
  const loading = ref(false);

  const { toPromise } = useScript({ src: './sdk.js' });
  async function getOfficeUrl() {
    const token = await getGetZOfficeTokenApi();
    return token;
  }

  async function init() {
    const zOfficeUrl = await getParamKeyApi(ParamsKeyEnum.ZOFFICE_URL);
    console.log(
      '%czOfficeUrl===>32： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      zOfficeUrl,
    );

    if (!zOfficeUrl) {
      messageFn.createMessage.error('加载失败！在线地址为null');
      return;
    }
    const token = await getOfficeUrl();

    const link = zOfficeUrl + `?zdocs_access_token=${token}`;
    await toPromise();

    const Application = await window.ZOfficeSDK.mount(link, '#ZOfficeContainer', true);
    console.log(
      '%cApplication===>25： ',
      'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
      Application,
    );
    if (!Application) {
      throw '加载失败';
    }
    await Application.ready();

    ZOffice.value = Application;
    // const sheets = await Application.ActiveWorkbook.getSheets();
    // console.log(sheets);
  }
  onMounted(async () => {
    try {
      loading.value = true;

      await init();
    } catch (e) {
      throw e;
    } finally {
      loading.value = false;
    }
  });
</script>
<style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-HZOffice';
  .@{prefix-cls}{

   width: 100%;
   height: 100%;

    ::v-deep(.ant-spin-container) {
      width: 100%;
      height: 100%;
    }
  }
</style>
